<template>
  <q-page class="cc-admin">
    <div>
      <div class="row">
        <q-item class="col-md-3 col-sm-6 col-xs-12 items-center">
          <q-item-label>标题：</q-item-label>
          <q-item-section class="col row">
            <q-input outlined dense v-model="searchForm.title" />
          </q-item-section>
        </q-item>
        <q-item class="col-md-3 col-sm-6 col-xs-12 items-center">
          <q-item-section>
            <div class="row justify-center">
              <q-btn unelevated no-wrap label="查询" color="primary" class="q-mx-xs" icon="search" :loading="loading" @click="query()">
                <template v-slot:loading>
                  <q-spinner-ios class="on-center" />
                </template>
              </q-btn>
              <q-btn outline no-wrap unelevated label="重置" class="q-mx-xs" color="primary" icon="refresh" @click="searchReset" />
            </div>
          </q-item-section>
        </q-item>
      </div>
      <q-table flat color="primary" class="cross_table" separator="cell" :columns="columns" :data="list" row-key="id" :pagination.sync="pagination"
        :visible-columns="group" @request="query" :rows-per-page-options="[10, 20, 50, 100]" selection="multiple" :selected.sync="selected">
        <template v-slot:top="table">
          <div class="row no-wrap full-width">
            <q-space />
            <table-top-btns label="系统通告" :showImport="false" :showExport="false" modelName="announcement" :showAdd="true" :table="table" :selected="selected"
              :importing="importing" :exporting="exporting" :importExcelUrlFull="importExcelUrlFull" :columns="columns" @groupChange="groupChange" @add="add"
              @importExcel="importExcel" @exportExcel="exportExcel" @showConfirm="showConfirm">
              <q-btn icon="mdi-upload-outline" :disable="selected.length !== 1 || selected[0].sendStatus === 'publish'" no-wrap color="green" label="发布"
                @click="confirmPublish" />
              <q-btn icon="mdi-upload-off-outline" :disable="selected.length !== 1 || selected[0].sendStatus !== 'publish'" no-wrap color="red" label="撤销"
                @click="confirmRevoked" />
            </table-top-btns>
          </div>
        </template>
        <template #body-cell-title="props">
          <q-td key="title" :props="props" style="min-width:120px;">{{ props.row.title }}</q-td>
        </template>
        <template #body-cell-priority="props">
          <q-td key="priority" :props="props">{{ getDictLabel(priority, props.row.priority) }}</q-td>
        </template>
        <template #body-cell-msgCategory="props">
          <q-td key="msgCategory" :props="props">{{ getDictLabel(msgType, props.row.msgCategory) }}</q-td>
        </template>
        <template #body-cell-msgType="props">
          <q-td key="msgType" :props="props">{{ getDictLabel(recevieType, props.row.msgType) }}</q-td>
        </template>
        <template #body-cell-sendStatus="props">
          <q-td key="sendStatus" :props="props">{{ getDictLabel(sendStatus, props.row.sendStatus) }}</q-td>
        </template>
        <template #body-cell-delFlag="props">
          <q-td key="delFlag" :props="props">{{ getDictLabel(delFlag, props.row.delFlag) }}</q-td>
        </template>
        <template #body-cell-openType="props">
          <q-td key="openType" :props="props">{{ getDictLabel(openType, props.row.openType) }}</q-td>
        </template>
        <template #body-cell-sendTime="props">
          <q-td key="sendTime" :props="props" style="max-width:100px;">{{ props.row.sendTime }}</q-td>
        </template>
        <template #body-cell-endTime="props">
          <q-td key="endTime" :props="props" style="max-width:100px;">{{ props.row.endTime }}</q-td>
        </template>
        <template #body-cell-opt="props">
          <q-td :props="props" :auto-width="true">
            <cc-btn label="编辑" color="primary" icon="edit" @click="edit(props.row)"> <q-tooltip>编辑</q-tooltip></cc-btn>
            <cc-btn label="复制" color="primary" icon="mdi-content-copy" @click="copy(props.row)"> <q-tooltip>复制</q-tooltip></cc-btn>
            <btn-del label="系统通告表" @confirm="del(props.row)" />
          </q-td>
        </template>
      </q-table>
    </div>
    <q-dialog :maximized="maximized" flat persistent ref="dialog">
      <q-form @submit="submit" :class="dialogSize">
        <h5 class="view_title justify-between q-px-md">
          {{ editType }}系统通告表
          <q-btn dense outline round icon="clear" size="sm" v-close-popup />
        </h5>
        <q-scroll-area class="col">
          <div class="row q-col-gutter-x-md dialog_form q-pa-md">
            <div class="col-6">
              <h5><q-icon name="star" color="red" />标题：</h5>
              <q-input outlined dense v-model="form.title" type="text" :rules="[requiredTest]" />
            </div>
            <div class="col-6">
              <h5>优先级：</h5>
              <q-select outlined dense emit-value v-model="form.priority" map-options :options="priority" />
            </div>
            <div class="col-12">
              <h5>摘要：</h5>
              <q-input outlined dense v-model="form.msgAbstract" rows="3" type="textarea" />
            </div>
            <div class="col-6">
              <h5>消息类型</h5>
              <q-select outlined dense emit-value v-model="form.msgCategory" map-options :options="msgType" />
            </div>
            <div class="col-6">
              <h5><q-icon name="star" color="red" />截至日期：</h5>
              <input-date-picker dense debounce="500" hide-bottom-space outlined :formData="form" formKey="endTime" type="datetime" :rules="[requiredTest]" />
            </div>
            <div class="col-4">
              <h5>通告对象：</h5>
              <q-select outlined dense emit-value v-model="form.msgType" map-options :options="recevieType" />
            </div>
            <div class="col-4" v-if="form.msgType === 'assign'">
              <h5>指定用户：</h5>
              <q-select outlined dense emit-value v-model="userList" map-options :options="userOptions" multiple @input="changeUserList" />

            </div>
            <div class="col-4" v-if="form.msgType === 'active'">
              <h5>在职用户：</h5>
              <q-select outlined dense emit-value v-model="activeList" map-options :options="userOptions" multiple @input="changeUserList" />
            </div>
            <div class="col-12">
              <h5>内容：</h5>
              <wang-editor v-model="form.msgContent" @change="change" />
            </div>
          </div>
        </q-scroll-area>
        <div class="row justify-center q-pa-md">
          <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
          <q-btn class="q-mx-md" color="primary" icon="mdi-check-bold" label="提交" :loading="loading" type="submit" />
        </div>
      </q-form>
    </q-dialog>
    <confirm ref="confirmPublishDialog" icon="mdi-upload-outline" msg="确定发布吗?" @confirm="publishAnnouncement()" />
    <confirm ref="confirmRevokedDialog" icon="mdi-upload-off-outline" msg="确定撤销吗?" @confirm="revokedAnnouncement()" />
    <confirm ref="confirmDialog" :msg="confirmMsg" @confirm="deleteBatch()" />
    <cc-loading :loading="loading" />
  </q-page>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import { requiredTest } from 'boot/inputTest';
import { getDictLabel } from 'boot/dictionary';
import confirm from 'components/confirm';
import WangEditor from 'components/wangeditor';
import axios from 'axios';

export default {
  name: 'SysAnnouncement',
  mixins: [IndexMixin],
  components: {
    confirm,
    WangEditor,
  },
  data() {
    return {
      mobile: false,
      maximized: false,
      dialogSize: 'dialog_card column',
      columns: [
        {
          name: 'index',
          align: 'center',
          label: '序号',
          field: 'index',
          headerClasses: 'cc-table-index',
        },
        {
          name: 'title', align: 'center', label: '标题', field: 'title',width: '15%',
        },
        {
          name: 'msgCategory', align: 'center', label: '消息类型', field: 'msgCategory',
        },
        {
          name: 'senderName', align: 'center', label: '发布人', field: 'senderName',
        },
        {
          name: 'priority', align: 'center', label: '优先级', field: 'priority',
        },
        {
          name: 'msgType', align: 'center', label: '通告对象', field: 'msgType',
        },
        {
          name: 'sendStatus', align: 'center', label: '发布状态', field: 'sendStatus',
        },
        {
          name: 'sendTime', align: 'center', label: '发布时间', field: 'sendTime',
        },
        {
          name: 'endTime', align: 'center', label: '截至日期', field: 'endTime',
        },
        {
          name: 'opt', align: 'center', label: '操作', field: 'id',
        },
      ],
      priority: [{ value: 'L', label: '低' }, { value: 'M', label: '中' }, { value: 'H', label: '高' }],
      msgType: [{ value: 'notice', label: '通知公告' }, { value: 'system', label: '系统消息' }],
      recevieType: [{ value: 'all', label: '全体用户' }, { value: 'assign', label: '指定用户' }, { value: 'active', label: '在职用户' }],
      sendStatus: [{ value: 'draft', label: '未发布' }, { value: 'publish', label: '已发布' }, { value: 'revoked', label: '已撤销' }],
      delFlag: [{ value: '0', label: '正常' }, { value: '1', label: '已删除' }],
      openType: [{ value: 'component', label: '组件' }, { value: 'url', label: '路由' }],
      userOptions: [],
      userList: [],
      activeList: [],
      showQuery: true,
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.BASE_URL}/sys/common/upload`,
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      url: {
        list: '/sys/announcement/list',
        add: '/sys/announcement/add',
        edit: '/sys/announcement/edit',
        copy:
          '/sys/announcement/copy',
        delete: '/sys/announcement/delete',
        deleteBatch: '/sys/announcement/deleteBatch',
        exportXlsUrl: '/sys/announcement/exportXls',
        importExcelUrl: '/sys/announcement/importExcel',
      },
    };
  },
  methods: {
    requiredTest,
    confirmRevoked() {
      this.$refs.confirmRevokedDialog.show();
    },
    revokedAnnouncement() {
      this.loading = true;
      this.$axios.get(`/sys/announcement/doReovkeData?id=${this.selected[0].id}`).then((rs) => {
        this.selected = [];
        this.query();
      });
    },
    confirmPublish() {
      this.$refs.confirmPublishDialog.show();
    },
    publishAnnouncement() {
      this.loading = true;
      this.$axios.get(`/sys/announcement/doReleaseData?id=${this.selected[0].id}`).then((rs) => {
        this.selected = [];
        this.query();
      });
    },
    addBefore() {
      this.userList = [];
      this.form = {
        msgCategory: 'notice', priority: 'H', msgType: 'all', userIds: '',
      };
      return true;
    },
    changeUserList() {
      if (this.form.msgType === 'active') {
        this.form.userIds = this.activeList.join(',');
      } else {
        this.form.userIds = this.userList.join(',');
      }
    },
    editBefore(p) {
      if (p.userIds && p.userIds.length > 0) {
        this.userList = p.userIds.split(',');
      } else {
        this.userList = [];
      }

      return true;
    },
    change(html, txt) {
      this.form.msgContent = html;
    },
    getDictLabel,
    initDict() {
      this.$axios.get('/sys/user/normalUserName').then((r) => {
        this.userOptions = r;
      });
    },
    submit() {
      let q;
      if (this.editType === '新建') {
        q = this.$axios.post(this.url.add, this.form);
      } else if (this.editType === '编辑') {
        q = this.$axios.put(this.url.edit, this.form);
      } else {
        q = this.$axios.post(this.url.add, this.form);
      }
      return q.then((r) => {
        this.$info(r.message);
        this.$refs.dialog.hide();
      }).finally(() => {
        this.query();
      });
    },
    copy(row) {
      this.editType = '复制';
      this.form = {
        ...row,
        id: null,
        sender: null,
        senderName: null,
        sendTime: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      if (row.userIds && row.userIds.length > 0) {
        this.userList = row.userIds.split(',');
      } else {
        this.userList = [];
      }
      this.$refs.dialog.show();
    },
  },
  mounted() {
    this.mobile = this.$q.platform.is.mobile;
    if (this.mobile) {
      this.dialogSize = 'dialog_full column';
      this.maximized = true;
    } else {
      this.dialogSize = 'dialog_card column';
      this.maximized = false;
    }
    this.initDict();
  },
};
</script>

<style lang="stylus"></style>
